<template>
	<div class="risk">
		<van-search class="info_search" v-model="value" placeholder="搜索" />
		<van-list
			style="margin-top: 10px"
			:finished="finished"
			v-model="loading"
			finished-text="没有更多了"
		>
			<van-checkbox-group
				ref="checkboxGroup"
				@change="handleChange"
				v-model="result"
			>
				<van-cell v-for="(item, index) in list" :key="index">
					<div class="risk_item_radio">
						<div>
							<div class="mb-10">{{ item.ChnName }}</div>
							<div>{{ item.OrgFullName }}</div>
						</div>
						<van-checkbox :name="item.UserName"></van-checkbox>
					</div>
				</van-cell>
			</van-checkbox-group>
		</van-list>
		<div class="choose_btm">
			<div class="choose_cancel">
				<van-button class="mr-10" type="warning" size="small" @click="checkAll"
					>全选</van-button
				>
				<van-button class="mr-10" type="warning" @click="toggleAll" size="small"
					>取消全选</van-button
				>
				<div>已选择{{ result.length || '' }}人</div>
			</div>
			<div class="choose_confirm">
				<van-button type="info" @click="submit">确定</van-button>
			</div>
		</div>
	</div>
</template>

<script>
import { getChooseUserList } from '@/api/common'
export default {
	props: {
		userId: {
			type: Array,
			default: () => null,
		},
	},
	data() {
		return {
			list: [],
			userlist: [],
			result: [],
			loading: false,
			finished: false,
			filter: {
				dataType: 'List',
				accounted: false,
				allDefault: true,
				userKind: 128,
			},
			activeNames: ['1'],
			border: false,
			value: '',
			radio: '',
		}
	},
	created() {
		this.result = this.userId
 
		this.getList()
	},
	methods: {
		handleChange(ids) {
			this.userlist = []
			ids.map((item) => {
				this.list.map((innerItem) => {
					if (innerItem.UserName == item) {
						this.userlist.push({
							code: innerItem.UserName,
							name: innerItem.ChnName,
						})
					}
				})
			})
		},

		checkAll() {
			this.$refs.checkboxGroup.toggleAll(true)
		},
		toggleAll() {
			this.$refs.checkboxGroup.toggleAll()
		},
        // 确认
		submit() {
			// console.log('userlist===>',this.userlist);
			// this.$router.push({
			// 	name: 'edit-chemical',
			// 	params: { userlist: this.userlist },
			// })
            this.$emit('cbManner',this.userlist )
		},
		getList() {
			this.loading = true
			getChooseUserList(this.filter)
				.then((res) => {
					this.loading = false
					this.list = res.data
					this.finished = true
					//this.filter.page = res.data.PageIndex;
				})
				.catch((err) => {
					this.finished = true
				})
		},

		// 文件页面
		goFile() {
			// this.$router.push('/CommonInfo/InfoDetail')
		},
		onSearch(val) {
			Toast(val)
		},
		onCancel() {
			Toast('')
		},
	},
}
</script>

<style lang="less" scoped>
.risk {
	height: 100vh;
	background-color: #e8f1f8;

	.info_search {
		padding: 10px;
		border-radius: 5px !important;

		.van-field__control {
			background-color: #ffffff !important;
		}
	}
}

.risk_item_radio {
	width: 100%;
	padding: 10px 20px;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	// border-bottom: 1px solid #e8f1f8;
}

.choose_btm {
	display: flex;
	width: 100%;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	.choose_cancel {
		padding: 0 10px;
		display: flex;
		align-items: center;
		float: left;
	}
	.choose_confirm {
		float: right;
		border-radius: 0;
	}
}
</style>
